<template>
    <div class="flexColumn appBox">
      <div class="header flexBetween" :class="$store.state.isMobile?'ismobileHeader':'pcHeader'">
        <div class="flexCenter" v-if='tabList.length'>
          <p style="width:1.2rem" v-for="(item,index) in tabList" @click="TabChange(item)"
            :class="{ stationCur:stationPerson == index }" :key="index">
            {{item.name}}
          </p>
        </div>
        <div class="titleTab cascader flexEnd titleHeight">
          <div class="flexBetween" @click="dataClick">
            <span class="dataPlacehoder">{{dateDefault}}</span>
            <i class="el-icon-arrow-down fontColor999"></i>
          </div>
        </div>
        <div>
          <mt-datetime-picker ref="pickerData" type="date" v-model="pickerVisible" year-format="{value} 年"
            month-format="{value} 月" date-format="{value} 日" :start-date="startDate" :end-date="endDate"
            @confirm="changeDateTime"></mt-datetime-picker>
        </div>
      </div>
      <section>
        <div class="sectionContent">
          <el-select style="margin-top: 0.2rem;" v-if="stationPerson==0" v-model="areaValue" placeholder="请选择"
            @change="changeHandle" size="mini">
            <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
          <div class="dailyReport sectionTopBox" style="margin-top: 0.3rem;">
            <!-- 扫单 -->
            <div class="flexConent">
              <div class="echartsWidth">
                <div id="sweepOrder1"></div>
                <div class="flexColumn circlFontSize" v-if='sweepOrder'>
                  <span>{{sweepOrder.yingclCount}}</span>
                  <span>当日应扫描笔数</span>
                  <span>{{sweepOrder.yiclCount}}</span>
                  <span>当日已扫描笔数</span>
                  <span class="itemColorGreen">{{sweepOrder.ratioOfSD}}%</span>
                  <span>当日扫单日清日结率</span>
                  <span>{{sweepOrder.wclCount}}</span>
                  <span>当日未扫单</span>
                </div>
              </div>
              <div class="echartsWidth">
                <div id="sweepOrder2"></div>
                <div class="flexColumn circlFontSize" v-if="examine && examine.total">
                  <span>{{examine.total.totalYclnum}}</span>
                  <span>当日应审核笔数</span>
                  <span>{{examine.total.totalYiclnum}}</span>
                  <span>当日已审核笔数</span>
                  <span class="itemColorGreen">{{examine.total.totalCll}}%</span>
                  <span>当日审核日清日结率</span>
                  <span>{{examine.total.totalWclnum}}</span>
                  <span>当日未审核</span>
                </div>
              </div>
              <div class="echartsWidth">
                <div id="sweepOrder3"></div>
                <div class="flexColumn circlFontSize" v-if="payObj && payObj.payMain">
                  <span>{{payObj.payMain.allNum}}</span>
                  <span>当日应支付笔数</span>
                  <span>{{payObj.payMain.ayNum}}</span>
                  <span>当日已支付笔数</span>
                  <span>{{payObj.payMain.allPersent}}</span>
                  <span>当日支付日清日结率</span>
                  <span>{{payObj.payMain.noNum}}</span>
                  <span>当日未支付</span>
                </div>
              </div>
            </div>
            <!-- 审核 -->
            <div class="flexConent">
              <div id="toExamine"></div>
            </div>
            <!-- 支付 -->
            <div class="pay">
              <div class="flexConent">
                <div id="pay_0"></div>
                <div id="pay_1"></div>
              </div>
              <div class="flexConent">
                <div id="pay_2"></div>
                <div id="pay_3"></div>
              </div>
              <div class="flexConent">
                <div id="pay_4"></div>
                <div id="pay_5"></div>
              </div>
              <!-- <div v-for="(item, index) in payType" :id="getId(index)"> </div> -->
            </div>
            <div class="flexConent">
              <div class="flexColumn" style="width:50%">
                <div id="overTimeBox"></div>
                <p v-if="stationPerson==1">
                  <span>总逾期{{overTime[0][0].PTYQDJZYQ}}单</span>&nbsp;
                  <span>其中信用付款{{overTime[0][0].PTYQDJXYFK}}单</span>&nbsp;
                  <span>领借款{{overTime[0][0].PTYQDJLJK}}单</span>&nbsp;
                  <span>先审后付{{overTime[0][0].PTYQDJXSH}}单</span>
                </p>
              </div>
              <div class="flexColumn" style="width:50%">
                <div id="overTimePostionBox"></div>
                <p v-if="stationPerson==1">
                  <span>待经办人处理{{overTime[0][0].PTYQDJKDWZJBR}}单</span>&nbsp;
                  <span>待扫描{{overTime[0][0].PTYQDJKDWZSM}}单</span>&nbsp;
                  <span>待初审{{overTime[0][0].PTYQDJKDWZCS}}单</span>&nbsp;
                  <span>待复审{{overTime[0][0].PTYQDJKDWZFS}}单</span>&nbsp;
                  <span>待支付{{overTime[0][0].PTYQDJKDWZZF}}单</span>
                </p>
              </div>
            </div>
            <div class="flexColumn" v-show="stationPerson==0">
              <div class="flexColumn personLiable">
                <p>逾期单据 卡点责任人分布</p>
                <div class="flexConent">
                  <span class="itemBgColor"></span> 经办人
                  <span class="itemBgColor2"></span> 扫描
                  <span class="itemBgColor3"></span> 初审
                  <span class="itemBgColor4"></span> 复审
                  <span class="itemBgColor5"></span> 支付
                </div>
              </div>
              <div id="overTimePersonBox" style="height: 4.2rem;"></div>
            </div>
            <div class="download">
              <span @click="download">一键导出明细表</span>
            </div>
          </div>
        </div>
      </section>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          headerTitle: "日清日结",
          areaValue: "0001",
          areaList: [
            { name: "西南", value: "0001" },
            { name: "华南", value: "0002" },
            { name: "长三角", value: "0003" },
            { name: "环渤海", value: "0004" }
          ],
          tabList: [{ name: "台长", value: '0' }, { name: "责任人", value: '1' }],
          dateDefault: "",
          stationPerson: '0', // 0 台长 1 责任人
          endDate: new Date(),
          pickerVisible: new Date(),
          startDate: new Date(),
          option: {},
          optionOne: {},
          optionTwo: {},
          payObj: {}, //支付数据data
          sweepOrder: {}, //扫单数据Data
          examine: {}, //审核数据
          overTime: {},
          examineoption: {}, //审核数据option
          payTypeOption: {}, //支付分类型
          payAreaOption: {}, //支付分地区
          payDqOption: {}, //支付分平台
          payZzOption: {}, //支付转账
          payBlOption: {}, //支付保理
          payCpOption: {}, //支付商票出票
          payDfOption: {}, //支付商票兑票
          overdueListType: {}, // 逾期单据
          overdueListPosition: {}, //逾期卡点分别
          overdueListPerson: {}, // 逾期卡点责任人分布。
          circleTextStyle: {
            textStyle: this.globalVariable.fontColor,
            fontWeight: "400"
          },
          circleSeriseData: [
            {
              name: "圆形图",
              type: "pie",
              radius: "80%", // 饼状图半径。
              center: this.ciclrCenter,
              tooltip: {
                show: true,
                // enterable: true,
                formatter: function (params) {
                  return params;
                }
              },
              data: [],
              label: {
                normal: {
                  position: "inner", //标签里面百分比的位置
                  show: true,
                  fontSize: 10,
                  color: this.globalVariable.labelColor
                }
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    formatter: "{d}%"
                  },
                  labelLine: { show: false } // 是否显示圆圈的->箭头指示图标
                }
              }
            }
          ],
          areaData: ["环渤海", "西南", "长三角", "华南"],
          typeData: ["转账", "票据-出票", "票据-兑票", "保理兑付"],
          payType: [
            { name: "支付日清日结率-分类型" },
            { name: "支付日清日结率-分平台" },
            { name: "转账支付日清日结率-分平台" },
            { name: "保理兑付日清日结率-分平台" },
            { name: "票据出票日清日结率-分平台" },
            { name: "票据兑付日清日结率-分平台" }
          ],
          payType1: [
            { name: "支付日清日结率-分类型" },
            { name: "支付日清日结率-分地区" },
            { name: "转账支付日清日结率" },
            { name: "保理兑付日清日结率" },
            { name: "票据出票日清日结率" },
            { name: "票据兑付日清日结率" }
          ],
          overTimeTitleList: [
            "逾期单据 分类型",
            "逾期单据 卡点位置分布",
            "逾期单据"
          ],
          data1: [
            { name: "经办人" },
            { name: "扫描" },
            { name: "扫描" },
            { name: "复审" },
            { name: "初审" },
            { name: "支付" },
            { name: "支付" }
          ],
          overYTime1: ["先审核后付款", "领借款", "信用付款"],
          overYTime2: ["华南", "长三角", "西南", "环渤海"],
          ciclrCenter: ["44%", "54%"] // 圆心位置
        };
      },
      created() {
        let year = new Date().getFullYear();
        let month1 = new Date().getMonth() + 1;
        let month = month1 > 10 ? month1 : "0" + (month1 - 1);
        this.startDate = new Date(Date.parse(year + "-" + month));
        this.endDate = new Date(Date.parse(year + "-" + month));
        this.pickerVisible = new Date(Date.parse(year + "-" + month));
        this.dateDefault = year + "/" + month;
        this.getDailReportData();
        this.getSweepOrderData();
        this.getExamineData();
        this.getoverTimeData();
      },
      watch: {
        // 支付数据变化时重新加载echarts 图表。
        payObj(newVal, oldVal) {
          this.payObj = newVal;
          this.updateData();
        },
        // // 扫单数据变化，重新渲染。
        // sweepOrder(newVal, oldVal) {
        //   this.sweepOrder = newVal;
        //   this.updateData();
        // },
        // examine(newVal, oldVal) {
        //   this.examine = newVal
        //   this.updateData();
        // },
        // overTime(newVal) {
        //   this.overTime = newVal
        //   this.updateData();
        // }
      },
      methods: {
        // 台长非台长
        TabChange(tab) {
          this.stationPerson = tab.value
          this.getSweepOrderData();
          this.getDailReportData();
          this.getExamineData();
          this.getoverTimeData();
        },
        changeHandle() {
          //扫单
          this.getSweepOrderData();
          // 支付
          this.getDailReportData();
          // 审核
          this.getExamineData();
          // 逾期
          this.getoverTimeData();
        },
        changeDateTime(val) {
          let timestr = new Date(val);
          let getYear = timestr.getFullYear();
          let getMon =
            timestr.getMonth() + 1 > 10
              ? timestr.getMonth() + 1
              : "0" + (timestr.getMonth() + 1);
          this.value = [getYear, getMon];
          this.dateDefault = getYear + "/" + getMon;
        },
        dataClick() {
          this.$refs.pickerData.open(); // 触发
        },
        // 一键导出明细表
        download() {
          this.$axios({
            method: "post",
            url: this.$api.download,
            headers: { "Content-Type": "application/json" },
            data: {
              params: {
                // access_token: this.$route.query.data,
                // userCode: this.$route.query.userCode,
                // yearv: this.$route.query.value[0],
                // orgCode: this.$route.query.orgCode,
                // orgName: this.$route.query.orgName,
                // roleType: this.$route.query.roleType,
                // mon: this.$route.query.value[1]
              }
            }
          }).then(res => { });
        },
        // 获取扫单接口
        getSweepOrderData() {
          this.$axios({
            method: "post",
            url: this.$api.sweepOrder,
            headers: { "Content-Type": "application/json" },
            data: {
              area: this.areaValue
            }
          }).then(res => {
            this.sweepOrder = res.data.datasOfSD;
            this.getSweep();
          });
        },
        // 获取支付接口
        getDailReportData() {
          this.$axios({
            method: "post",
            url: this.$api.dailReport,
            headers: { "Content-Type": "application/json" },
            data: {
              params: {
                area: this.areaValue,
                flag: this.stationPerson
                //   // access_token: this.$route.query.data,
                //   // userCode: this.$route.query.userCode,
                //   // yearv: this.$route.query.value[0],
                //   // orgCode: this.$route.query.orgCode,
                //   // orgName: this.$route.query.orgName,
                //   // roleType: this.$route.query.roleType,
                //   // mon: this.$route.query.value[1]
              }
            }
          })
            .then(res => {
              if (res.data.result) {
                this.payObj = res.data.result;
                this.getlist1();
                this.getPay();
              }
              if (res.data.result.ErrorCode === "000001") {
                if (this.$store.state.isMobile) {
                  this.methodApi.AlertNoToken();
                } else {
                  this.methodApi.pcAlertNoToken();
                }
              }
            })
            .catch(error => {
              console.log(error, "home数据error");
            });
        },
        //获取审核的接口
        getExamineData() {
          this.$axios({
            method: "post",
            url: this.$api.examine,
            headers: { "Content-Type": "application/json" },
            data: {
              params: {
                area: this.areaValue,
                flag: this.stationPerson
                // access_token: this.$route.query.data,
                // userCode: this.$route.query.userCode
                // yearv: this.$route.query.value[0],
                // orgCode: this.$route.query.orgCode,
                // orgName: this.$route.query.orgName,
                // roleType: this.$route.query.roleType,
                // mon: this.$route.query.value[1]
              }
            }
          }).then(res => {
            this.examine = res.data.result;
            this.getExamine();
            this.getlist4();
          });
        },
        //获取逾期的接口
        getoverTimeData() {
          this.$axios({
            method: "post",
            url: this.$api.overTime,
            headers: { "Content-Type": "application/json" },
            data: {
              // access_token: this.$route.query.data,
              // userCode: this.$route.query.userCode,
              // date: "20190926",
              area: this.areaValue,
              flag: this.stationPerson
              // yearv: this.$route.query.value[0],
              // orgCode: this.$route.query.orgCode,
              // orgName: this.$route.query.orgName,
              // roleType: this.$route.query.roleType,
              // mon: this.$route.query.value[1]
            }
          }).then(res => {
            this.overTime = res.data.settles;
            this.getoverTime();
            this.getoverTimePostion();
            this.getOverTimePerson()
          });
        },
        // 扫单饼状图
        getSweep() {
          let that = this;
          this.option = {
            title: {
              text: "扫单",
              textStyle: this.circleTextStyle
            },
            series: JSON.parse(JSON.stringify(this.circleSeriseData)),
            tooltip: {
              position: "top",
              formatter: function (
                params //数据格式,
              ) {
                if (params.dataIndex == 0) {
                  var str = "";
                  str =
                    "当日扫单中，土地款" +
                    that.sweepOrder.yiclCount +
                    "笔," +
                    "<br>" +
                    "大额工程款" +
                    that.sweepOrder.yiclCount +
                    "急单" +
                    +"笔" +
                    "<br>";
                  "笔," + "保理付款" + that.sweepOrder.yiclCount + "笔";
                }
                return str;
              }
            }
          };
          this.option.series[0].data = [
            {
              value: this.sweepOrder.yiclCount,
              name: "当日已扫描笔数",
              hoverAnimation: false,
              itemStyle: {
                normal: {
                  // color: this.globalVariable.itemBgColor
                }
              }
            },
            {
              value: this.sweepOrder.wclCount,
              name: "当日未扫描笔数",
              hoverAnimation: false,
              itemStyle: {
                normal: {
                  // color: this.globalVariable.itemBgColor1
                }
              }
            }
          ];
        },
        // 审核饼状图
        getExamine() {
          let that = this;
          this.optionOne = {
            title: {
              text: "审核",
              textStyle: this.circleTextStyle
            },
            tooltip: {
              position: "top",
              formatter: function (
                params, //数据格式,
                data
              ) {
                if (params.dataIndex == 0) {
                  var str = "";
                  str =
                    "当日未审核中，土地款" +
                    that.examine.total.totalwshtdknum +
                    "笔," +
                    "<br>" +
                    "大额工程款" +
                    that.examine.total.totalwshdegcknum +
                    "急单" +
                    that.examine.total.totaljdnum +
                    "笔" +
                    "<br>";
                  "笔," + "保理付款" + that.examine.total.totalwshblnum + "笔";
                }
                return str;
              }
            },
            series: JSON.parse(JSON.stringify(this.circleSeriseData))
          };
          this.optionOne.series[0].data = [
            {
              value: this.examine.total.totalYiclnum,
              name: "当日已审核笔数",
              itemStyle: {
                normal: {
                  // color: this.globalVariable.itemBgColor
                }
              }
            },
            {
              value: this.examine.total.totalWclnum,
              name: "当日未审核笔数",
              itemStyle: {
                normal: {
                  // color: this.globalVariable.itemBgColor1
                }
              }
            }
          ];
        },
        // 支付圆形图
        getlist1() {
          let that = this;
          this.optionTwo = {
            title: {
              text: "支付",
              textStyle: this.circleTextStyle
            },
            tooltip: {
              position: "top",
              formatter: function (
                params, //数据格式,
                data
              ) {
                if (params.dataIndex == 0) {
                  var str = "";
                  str =
                    "当日未支付中，土地款" +
                    that.payObj.payMain.noCheck.landFund +
                    "笔," +
                    "<br>" +
                    "大额工程款" +
                    that.payObj.payMain.noCheck.largeScale +
                    "急单" +
                    that.payObj.payMain.noCheck.urgentOrder +
                    "笔" +
                    "<br>";
                  "笔," +
                    "保理付款" +
                    that.payObj.payMain.noCheck.facBusiness +
                    "笔";
                }
                return str;
              }
            },
            series: JSON.parse(JSON.stringify(this.circleSeriseData))
          };
          this.optionTwo.series[0].data = [
            {
              value: this.payObj.payMain.ayNum,
              name: "当日已支付笔数",
              hoverAnimation: false,
              animation: false,
              itemStyle: {
                normal: {
                  // color: this.globalVariable.itemBgColor
                }
              }
            },
            {
              value: this.payObj.payMain.noNum,
              name: "当日未支付笔数",
              hoverAnimation: false, //todo 鼠标移入不变打
              animation: false,
              label: {
                show: true
              },
              itemStyle: {
                normal: {
                  // color: this.globalVariable.itemBgColor1
                }
              }
            }
          ];
        },
        // 审核员工还是平台
        getlist4(
          showData,
          EmployeeOrPlatform,
          xAxisMax,
          xsplitNumber,
          yAxisMax,
          yAxisMin,
          ysplitNumber
        ) {
          // showData 控制是否显示数据具体信息。
          let nameList = this.examine.palist;
          let yclnumData = [];
          let XdataList = [];
          let ycData = [];
          let wData = [];
          let cllData = [];
          nameList.forEach(item => {
            XdataList.push(item.poname);
            ycData.push(item.yclnum);
            wData.push(item.wclnum);
            cllData.push(item.cll);
            yclnumData.push(item.yclnum);
          });
          let max = Math.max(...yclnumData);
          let cllMax = Math.max(...cllData);
          this.examineoption = {
            title: {
              text: "审核日清日结率-分员工",
              left: "center",
              textStyle: this.globalVariable.fontColor
            },
            legend: {
              data: ["已处理", "未处理", "日清日结率"], // TODO 和series中Name一一对应；
              left: "center",
              top: 12,
              selectedMode: false, //取消图例上的点击事件
              textStyle: this.globalVariable.legendTextStyle
            },
            grid: {
              // left: '1%',
              // right: '2%',
              // bottom: '2%',
              // containLabel: true // 自动居中
            },
            xAxis: {
              // EmployeeOrPlatform。员工还是平台data 不一样。
              axisLabel: this.globalVariable.axisLabel,
              axisLine: this.globalVariable.axisLine,
              data: XdataList // TODO x轴需要展示的数据
            },
            yAxis: [
              {
                type: "value",
                scale: true,
                name: "",
                max: max, // TODO 最大值数据
                min: 0, // TODO 最小值数据
                splitNumber: 11,
                axisLabel: this.globalVariable.axisLabel,
                axisLine: this.globalVariable.axisLine,
                splitLine: this.globalVariable.splitLine
              },
              {
                type: "value",
                scale: true,
                name: "",
                max: cllMax, // TODO 最大值数据
                min: 80, // TODO 最小值数据
                splitNumber: 11, // 控制显示多少行线标
                axisLabel: this.globalVariable.yxisLabel,
                axisLine: this.globalVariable.axisLine,
                splitLine: this.globalVariable.splitLine
              }
            ],
            dataZoom: this.globalVariable.dataZoom,
            series: [
              {
                name: "已处理", // todo xAxis.data值
                type: "bar",
                stack: "处理", // 控制是堆型，还是列型图
                barGap: "20%" /*多个并排柱子设置柱子之间的间距*/,
                barCategoryGap: "50%",
                barMinHeight: this.globalVariable.barMinHeight,
                hoverAnimation: false,
                label: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize
                  // color: this.globalVariable.labelColor
                },
                itemStyle: {
                  normal: {
                    // color: this.globalVariable.itemBgColor
                  }
                },
                data: ycData // todo xAxis.data[0]值
                // markLine: {
                //   lable: {
                //     show: true
                //   },
                //   itemStyle: {
                //     normal: {
                //       color: this.globalVariable.brokenLineColor
                //     }
                //   },
                //   data: [{ type: "average", name: "平均值" }] //虚线图平均值
                // }
              },
              {
                name: "未处理",
                type: "bar",
                stack: "处理", // 控制是堆型，还是列型图
                barGap: "20%" /*多个并排柱子设置柱子之间的间距*/,
                barCategoryGap: "50%",
                barMinHeight: this.globalVariable.barMinHeight,
                hoverAnimation: false,
                label: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize,
                  color: this.globalVariable.labelColor
                },
                itemStyle: {
                  normal: {
                    // color: this.globalVariable.itemBgColor1
                  }
                },
                data: wData
              },
              {
                name: "日清日结率",
                type: "line",
                yAxisIndex: 1,
                barMinHeight: this.globalVariable.barMinHeight,
                label: {
                  show: true,
                  color: this.globalVariable.labelColor,
                  fontSize: this.globalVariable.itemFontSize
                  // formatter: function (a) {
                  //   // 控制折现图自定义标记数据。
                  //   return a + "%";
                  // }
                },
                itemStyle: {
                  normal: {
                    // color: this.globalVariable.itemBgColor2 // 和lengded的表头颜色一致
                  }
                },
                lineStyle: this.globalVariable.brokenLineStyle,
                data: cllData
              }
            ]
          };
        },
        // 支付类型数据获取，公用方法。
        getPayOption(
          echartTitle,
          xAxisdata,
          series1Data,
          series2Data,
          series3Data,
          showData,
          yAxisMax,
          yAxisMin,
          yAxisMax1,
          yAxisMin1,
          ysplitNumber,
          xAxisMax,
          xAxisMin,
          xsplitNumber
        ) {
          // showData 是否图形显示具体数据，
          // xAxisMax, xAxisMin,xsplitNumber【x轴最大最小值，x轴可分为几个范围】
          // yAxisMax, yAxisMin,ysplitNumber, echartTitley轴最大最小值，y轴可分为几个范围
          let option2 = {
            title: {
              text: echartTitle,
              left: "center",
              textStyle: this.globalVariable.fontColor
            },
            legend: {
              textStyle: this.globalVariable.legendTextStyle,
              top: 10,
              itemWidth: 12,
              itemHeight: 12,
              data: ["已处理", "未处理", "日清日结率"] // todo 和series中Name一一对应；
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              data: xAxisdata,
              axisLabel: this.globalVariable.axisLabel,
              axisLine: this.globalVariable.axisLine
            },
            yAxis: [
              {
                type: "value",
                scale: true,
                name: "",
                max: yAxisMax,
                min: yAxisMin,
                splitNumber: 11,
                axisLabel: this.globalVariable.axisLabel,
                axisLine: this.globalVariable.axisLine,
                boundaryGap: [0.2, 0.2],
                splitLine: this.globalVariable.splitLine
              },
              {
                type: "value",
                scale: true,
                name: "",
                max: yAxisMax1,
                min: 0,
                axisLabel: this.globalVariable.yxisLabel,
                axisLine: this.globalVariable.axisLine,
                boundaryGap: [0.2, 0.2],
                splitLine: this.globalVariable.splitLine
              }
            ],
            // dataZoom: this.globalVariable.dataZoom,
            series: [
              {
                name: "已处理",
                type: "bar",
                stack: "已处理", // 控制是堆型，还是列型图
                barMinHeight: this.globalVariable.barMinHeight,
                label: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize,
                  color: this.globalVariable.labelColor
                },
                itemStyle: {
                  normal: {
                    color: '#a864d3'
                  }
                },
                // markLine: {
                //   label: {
                //     show: false
                //   },
                //   itemStyle: {
                //     normal: {
                //       color: this.globalVariable.brokenLineColor
                //     }
                //   },
                //   data: [{ type: "average", name: "平均值" }] //虚线图平均值
                // },
                data: series1Data
              },
              {
                name: "未处理",
                type: "bar",
                stack: "已处理",
                barMinHeight: this.globalVariable.barMinHeight,
                label: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize
                },
                itemStyle: {
                  normal: {
                    color: 'blue'
                  }
                },
  
                data: series2Data
              },
              {
                name: "日清日结率",
                type: "line",
                yAxisIndex: 1, // 使用Y轴的右侧坐标
                itemStyle: {
                  normal: {
                    color: this.globalVariable.brokenLineStyle
                  }
                },
                label: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize,
                  color: this.globalVariable.labelColor
                  // formatter:"{c}%"
                },
                lineStyle: this.globalVariable.brokenLineStyle,
                data: series3Data
              },
              {
                name: "日清日结率",
                type: "line",
                yAxisIndex: 1, // 使用Y轴的右侧坐标
                // markLine: {
                //   lable: {
                //     show: true
                //   },
                //   itemStyle: {
                //     normal: {
                //       color: this.globalVariable.brokenLineColor
                //     }
                //   },
                //   data: [{ type: "average", name: "平均值" }] //虚线图平均值
                // },//平均数，需要添加新的列
                itemStyle: {
                  normal: {
                    color: this.globalVariable.brokenLineStyle
                  }
                },
                label: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize,
                  color: this.globalVariable.labelColor
                  // formatter:"{c}%"
                },
                lineStyle: this.globalVariable.brokenLineStyle,
                data: series3Data
              }
            ]
          };
          return option2;
        },
        // 支付类型数据赋值。
        getPay() {
          // 支付日清日结分类型
          // 已处理
          if (this.stationPerson == 1) {
            //责任人
            let seriesList1 = this.getTypeDetailData(this.payObj.payTypes)[0];
            let seriesList2 = this.getTypeDetailData(this.payObj.payTypes)[1];
            let seriesList3 = this.getTypeDetailData(this.payObj.payTypes)[2];
            let YLmaxNum = this.getTypeDetailData(this.payObj.payTypes)[3];
            let YRmaxNum = this.getTypeDetailData(this.payObj.payTypes)[4];
            this.payTypeOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType[0].name,
                  this.typeData,
                  seriesList1,
                  seriesList2,
                  seriesList3,
                  true,
                  YLmaxNum,
                  0,
                  YRmaxNum,
                  0
                )
              )
            );
            // 支付日清日结分地区
            // 已处理
            let AreasseriesList1 = this.getAreaDetailData(this.payObj.payAreas)[0];
            let AreasseriesList2 = this.getAreaDetailData(this.payObj.payAreas)[1];
            let AreasseriesList3 = this.getAreaDetailData(this.payObj.payAreas)[2];
            let AreasYLmaxNum = this.getAreaDetailData(this.payObj.payAreas)[3]; // Y轴左侧最大值
            let AreasYRmaxNum = this.getAreaDetailData(this.payObj.payAreas)[4]; // Y轴右侧最大值
            this.payAreaOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType[1].name,
                  this.areaData,
                  AreasseriesList1,
                  AreasseriesList2,
                  AreasseriesList3,
                  true,
                  AreasYLmaxNum,
                  0,
                  AreasYRmaxNum,
                  0
                )
              )
            );
            //平台责任人明细块，
            let PT_ZZ = this.payObj.PT_DETAILS.ZZ; //转账详情柱状图
            let PT_BL = this.payObj.PT_DETAILS.BL; //保理-兑付详情柱状图
            let PT_CP = this.payObj.PT_DETAILS.CP; //商票-出票详情柱状图
            let PT_DF = this.payObj.PT_DETAILS.DF; //商票-兑付详情柱状图
            // 【转账】
            let payZzDetailList = this.getAreaDetailData(PT_ZZ)[0];
            let payZzDetailList1 = this.getAreaDetailData(PT_ZZ)[1];
            let payZzDetailList2 = this.getAreaDetailData(PT_ZZ)[2];
            let payZzYLmaxNum = this.getAreaDetailData(PT_ZZ)[3];
            let payZzYRmaxNum = this.getAreaDetailData(PT_ZZ)[4];
            this.payZzOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType[2].name,
                  this.areaData,
                  payZzDetailList,
                  payZzDetailList1,
                  payZzDetailList2,
                  true,
                  payZzYLmaxNum,
                  0,
                  payZzYRmaxNum,
                  0
                )
              )
            );
            // 【保理】
            let payBlDetailList = this.getAreaDetailData(PT_BL)[0];
            let payBlDetailList1 = this.getAreaDetailData(PT_BL)[1];
            let payBlDetailList2 = this.getAreaDetailData(PT_BL)[2];
            let payBlYLmaxNum = this.getAreaDetailData(PT_BL)[3];
            let payBlYRmaxNum = this.getAreaDetailData(PT_BL)[4];
            this.payBlOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType[3].name,
                  this.areaData,
                  payBlDetailList,
                  payBlDetailList1,
                  payBlDetailList2,
                  true,
                  payBlYLmaxNum,
                  0,
                  payBlYRmaxNum,
                  0
                )
              )
            );
            // 【商票出票】
            let payCpDetailList = this.getAreaDetailData(PT_CP)[0];
            let payCpDetailList1 = this.getAreaDetailData(PT_CP)[1];
            let payCpDetailList2 = this.getAreaDetailData(PT_CP)[2];
            let payCpYLmaxNum = this.getAreaDetailData(PT_CP)[3];
            let payCpYRmaxNum = this.getAreaDetailData(PT_CP)[4];
            this.payCpOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType[4].name,
                  this.areaData,
                  payCpDetailList,
                  payCpDetailList1,
                  payCpDetailList2,
                  true,
                  payCpYLmaxNum,
                  0,
                  payCpYRmaxNum,
                  0
                )
              )
            );
            // 【商票兑付】
            let payDfDetailList = this.getAreaDetailData(PT_DF)[0];
            let payDfDetailList1 = this.getAreaDetailData(PT_DF)[1];
            let payDfDetailList2 = this.getAreaDetailData(PT_DF)[2];
            let payDfYLmaxNum = this.getAreaDetailData(PT_DF)[3];
            let payDfYRmaxNum = this.getAreaDetailData(PT_DF)[4];
            this.payDfOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType[5].name,
                  this.areaData,
                  payDfDetailList,
                  payDfDetailList1,
                  payDfDetailList2,
                  true,
                  payDfYLmaxNum,
                  0,
                  payDfYRmaxNum,
                  0
                )
              )
            );
          } else {
            let seriesList1 = this.getTypeDetailData(this.payObj.payTypes)[0];
            let seriesList2 = this.getTypeDetailData(this.payObj.payTypes)[1];
            let seriesList3 = this.getTypeDetailData(this.payObj.payTypes)[2];
            let YLmaxNum = this.getTypeDetailData(this.payObj.payTypes)[3];
            let YRmaxNum = this.getTypeDetailData(this.payObj.payTypes)[4];
            this.payTypeOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType1[0].name,
                  this.typeData,
                  seriesList1,
                  seriesList2,
                  seriesList3,
                  true,
                  YLmaxNum,
                  0,
                  YRmaxNum,
                  0
                )
              )
            );
            // 支付日清日结分地区
            // 已处理
            let AreasseriesList1 = this.getPlatformData(this.payObj.payDQ)[0];
            let AreasseriesList2 = this.getPlatformData(this.payObj.payDQ)[1];
            let AreasseriesList3 = this.getPlatformData(this.payObj.payDQ)[2];
            let AreasYLmaxNum = this.getPlatformData(this.payObj.payDQ)[3];
            let AreasYRmaxNum = this.getPlatformData(this.payObj.payDQ)[4];
            let AreasNameList = this.getPlatformData(this.payObj.payDQ)[5];
            this.payAreaOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType1[1].name,
                  AreasNameList,
                  AreasseriesList1,
                  AreasseriesList2,
                  AreasseriesList3,
                  true,
                  AreasYLmaxNum,
                  0,
                  AreasYRmaxNum,
                  0
                )
              )
            );
            //平台责任人明细块，
            let PT_ZZ = this.payObj.DQ_DETAILS.ZZ; //转账详情柱状图
            let PT_BL = this.payObj.DQ_DETAILS.BL; //保理-兑付详情柱状图
            let PT_CP = this.payObj.DQ_DETAILS.CP; //商票-出票详情柱状图
            let PT_DF = this.payObj.DQ_DETAILS.DF; //商票-兑付详情柱状图
            // 【转账】
            let payZzDetailList = this.getPlatformData(PT_ZZ)[0];
            let payZzDetailList1 = this.getPlatformData(PT_ZZ)[1];
            let payZzDetailList2 = this.getPlatformData(PT_ZZ)[2];
            let payZzYLmaxNum = this.getPlatformData(PT_ZZ)[3];
            let payZzYRmaxNum = this.getPlatformData(PT_ZZ)[4];
            let AreasZzNameList = this.getPlatformData(PT_ZZ)[5];
            this.payZzOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType1[2].name,
                  AreasZzNameList,
                  payZzDetailList,
                  payZzDetailList1,
                  payZzDetailList2,
                  true,
                  payZzYLmaxNum,
                  0,
                  payZzYRmaxNum,
                  0
                )
              )
            );
            // 【保理】
            let payBlDetailList = this.getPlatformData(PT_BL)[0];
            let payBlDetailList1 = this.getPlatformData(PT_BL)[1];
            let payBlDetailList2 = this.getPlatformData(PT_BL)[2];
            let payBlYLmaxNum = this.getPlatformData(PT_BL)[3];
            let payBlYRmaxNum = this.getPlatformData(PT_BL)[4];
            let AreasBlNameList = this.getPlatformData(PT_BL)[5];
            this.payBlOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType1[3].name,
                  AreasBlNameList,
                  payBlDetailList,
                  payBlDetailList1,
                  payBlDetailList2,
                  true,
                  payBlYLmaxNum,
                  0,
                  payBlYRmaxNum,
                  0
                )
              )
            );
            // 【商票出票】
            let payCpDetailList = this.getPlatformData(PT_CP)[0];
            let payCpDetailList1 = this.getPlatformData(PT_CP)[1];
            let payCpDetailList2 = this.getPlatformData(PT_CP)[2];
            let payCpYLmaxNum = this.getPlatformData(PT_CP)[3];
            let payCpYRmaxNum = this.getPlatformData(PT_CP)[4];
            let AreasCpNameList = this.getPlatformData(PT_CP)[5];
            this.payCpOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType1[4].name,
                  AreasCpNameList,
                  payCpDetailList,
                  payCpDetailList1,
                  payCpDetailList2,
                  true,
                  payCpYLmaxNum,
                  0,
                  payCpYRmaxNum,
                  0
                )
              )
            );
            // 【商票兑付】
            let payDfDetailList = this.getPlatformData(PT_DF)[0];
            let payDfDetailList1 = this.getPlatformData(PT_DF)[1];
            let payDfDetailList2 = this.getPlatformData(PT_DF)[2];
            let payDfYLmaxNum = this.getPlatformData(PT_DF)[3];
            let payDfYRmaxNum = this.getPlatformData(PT_DF)[4];
            let AreasDfNameList = this.getPlatformData(PT_DF)[5];
            this.payDfOption = JSON.parse(
              JSON.stringify(
                this.getPayOption(
                  this.payType1[5].name,
                  AreasDfNameList,
                  payDfDetailList,
                  payDfDetailList1,
                  payDfDetailList2,
                  true,
                  payDfYLmaxNum,
                  0,
                  payDfYRmaxNum,
                  0
                )
              )
            );
          }
        },
        //获取台长视角分地区的series.Data值，x,y轴最大值。数据。
        getPlatformData(list) {
          let nameList = [];
          let platformPersonList = [];
          let platformPersonList1 = [];
          let platformPersonList2 = [];
          let platformPersonmaxList = [];
          list.forEach(item => {
            nameList.push(item.dqName);
            platformPersonList.push(item.ayNum);
            platformPersonList1.push(item.noNum);
            platformPersonList2.push(item.persent);
            platformPersonmaxList.push(item.allNum);
          });
          let YLmaxNum = Math.max(...platformPersonmaxList) + 20;
          let YRmaxNum = Math.max(...platformPersonList2) + 5;
          return [
            platformPersonList,
            platformPersonList1,
            platformPersonList2,
            YLmaxNum,
            YRmaxNum,
            nameList
          ];
        },
        //获取支付分类型的数据。series.Data值，x,y轴最大值。
        getTypeDetailData(obj) {
          let seriesList1 = [
            obj.ZZTypes.zzAyNum,
            obj.CPTypes.cpAyNum,
            obj.DFTypes.dfAyNum,
            obj.BLTypes.blAyNum
          ];
          //未处理
          let seriesList2 = [
            obj.ZZTypes.zzNoNum,
            obj.CPTypes.cpNoNum,
            obj.DFTypes.dfNoNum,
            obj.BLTypes.blNoNum
          ];
          //日清日结率
          let seriesList3 = [
            obj.ZZTypes.zzPersent,
            obj.CPTypes.cpPersent,
            obj.DFTypes.dfPersent,
            obj.BLTypes.blPersent
          ];
          let maxList = [
            obj.DFTypes.dfAllNum,
            obj.BLTypes.blAllNum,
            obj.CPTypes.cpAllNum,
            obj.ZZTypes.zzAllNum
          ]; //Y轴左侧最大值
          let YLmaxNum = Math.max(...maxList) + 20;
          let YRmaxNum = Math.max(...seriesList3) + 5;
          return [seriesList1, seriesList2, seriesList3, YLmaxNum, YRmaxNum];
        },
        // 获取支付地区分平台
        getAreaDetailData(obj) {
          //series.Data值，x,y轴最大值。
          let List1 = [
            obj.HBH.hbhAyNum,
            obj.XN.xnAyNum,
            obj.CSJ.csjAyNum,
            obj.HN.hnAyNum
          ];
          //未处理
          let List2 = [
            obj.HBH.hbhNoNum,
            obj.XN.xnNoNum,
            obj.CSJ.csjNoNum,
            obj.HN.hnNoNum
          ];
          //日清日结率
          let List3 = [
            obj.HBH.hbhPersent,
            obj.XN.xnPersent,
            obj.CSJ.csjPersent,
            obj.HN.hnPersent
          ];
          let maxList = [
            obj.HBH.hbhAllNum,
            obj.XN.xnAllNum,
            obj.CSJ.csjAllNum,
            obj.HN.hnAllNum
          ]; //Y轴左侧最大值
          let YLmaxNum = Math.max(...maxList) + 20;
          let YRmaxNum = Math.max(...List3) + 5;
          return [List1, List2, List3, YLmaxNum, YRmaxNum];
        },
        //逾期分类型。
        getoverTime() {
          this.overdueListType = {
            title: {
              text:
                this.stationPerson == 1 ? this.overTimeTitleList[0] : "逾期单据",
              left: "center",
              textStyle: this.globalVariable.fontColor
            },
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {
            //         type: 'shadow'
            //     }
            // },
            // legend: {
            //   data: ["2011年", "2012年"],
            //   textStyle: this.globalVariable.legendTextStyle,
            //   top: 12,
            //   left: "center"
            // },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
              axisLabel: this.globalVariable.axisLabel,
              axisLine: this.globalVariable.axisLine,
              splitLine: this.globalVariable.splitLine
            },
            yAxis: {
              type: "category",
              data: [],
              axisLabel: this.globalVariable.axisLabel,
              axisLine: this.globalVariable.axisLine
            },
            // dataZoom: this.globalVariable.dataZoom,
            series: []
          };
          // 台长 组长视角
          if (this.stationPerson == 0) {
            this.overdueListType.yAxis.data = this.overYTime1;
            let dataType1 = {
              name: "单量",
              type: "bar",
              barMinHeight: this.globalVariable.barMinHeight,
              label: {
                normal: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize
                }
              },
              itemStyle: {
                normal: {
                  color: '#666'
                }
              },
              data: []
            }
            this.overdueListType.series.push(dataType1)
            this.overTime[0] && this.overTime[0][0] && this.overTime[0][0].YQDJXSH ? this.overdueListType.series[0].data = [
              this.overTime[0][0].YQDJXSH,
              this.overTime[0][0].YQDJXYFK,
              this.overTime[0][0].YQDJLJK
            ] : "";
          } else {
            //平台负责人视角
            this.getPtPersonData();
            this.overdueListType.yAxis.data = this.overYTime2;
            let legend = ["华南", "长三角", "西南", "环渤海"];
            let colorList = ["red", "blue", "pink"];
            colorList.forEach((item, index) => {
              let obj = {
                name: item,
                type: "bar",
                stack: "总量",
                barMinHeight: this.globalVariable.barMinHeight,
                label: {
                  normal: {
                    show: true,
                    fontSize: this.globalVariable.itemFontSize
                  }
                },
                itemStyle: {
                  normal: {
                    color: colorList[index]
                  } //this.globalVariable.itemBgColor
                },
                data: []
              };
              this.overdueListType.series.push(obj);
            });
            this.overdueListType.series[0].data = this.seriesData11;
            this.overdueListType.series[1].data = this.seriesData21;
            this.overdueListType.series[2].data = this.seriesData31;
          }
        },
        //逾期分地区。
        getoverTimePostion() {
          this.overdueListPosition = {
            title: {
              text: this.overTimeTitleList[1],
              left: "center",
              textStyle: this.globalVariable.fontColor
            },
            legend: {
              data: ["直接访问", "邮件营销"],
              textStyle: this.globalVariable.legendTextStyle,
              top: 12,
              left: "center"
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
              axisLabel: this.globalVariable.axisLabel,
              axisLine: this.globalVariable.axisLine,
              splitLine: this.globalVariable.splitLine
            },
            yAxis: {
              type: "category",
              data: [],
              axisLabel: this.globalVariable.axisLabel,
              axisLine: this.globalVariable.axisLine
            },
            // dataZoom: this.globalVariable.dataZoom,
            series: []
          };
          if (this.stationPerson == 0) {
            let legend = ["经办人", "扫描", "初审", "复审", "支付"];
            let colorList = ["red", "blue", "pink", "green", "#eee"];
            this.overdueListPosition.yAxis.data = this.overYTime1;
            this.getPersonData();
            legend.forEach((item, index) => {
              let obj = {
                name: item,
                type: "bar",
                stack: "总量",
                barMinHeight: this.globalVariable.barMinHeight,
                label: {
                  normal: {
                    show: true,
                    fontSize: this.globalVariable.itemFontSize
                  }
                },
                itemStyle: {
                  normal: {
                    color: colorList[index]
                  } //this.globalVariable.itemBgColor
                }
              };
              this.overdueListPosition.series.push(obj);
            });
            this.overdueListPosition.series[0].data = this.seriesData1;
            this.overdueListPosition.series[1].data = this.seriesData2;
            this.overdueListPosition.series[2].data = this.seriesData3;
            this.overdueListPosition.series[3].data = this.seriesData4;
            this.overdueListPosition.series[4].data = this.seriesData5;
          } else {
            this.getOtPersonData();
            this.overdueListPosition.yAxis.data = this.overYTime2;
            let legend = ["华南", "长三角", "西南", "环渤海"];
            let colorList = ["red", "blue", "pink"];
            colorList.forEach((item, index) => {
              let obj = {
                name: item,
                type: "bar",
                stack: "总量",
                barMinHeight: this.globalVariable.barMinHeight,
                label: {
                  normal: {
                    show: true,
                    fontSize: this.globalVariable.itemFontSize
                  }
                },
                itemStyle: {
                  normal: {
                    color: colorList[index]
                  } //this.globalVariable.itemBgColor
                },
                data: []
              };
              this.overdueListPosition.series.push(obj);
            });
            this.overdueListPosition.series[0].data = this.seriesData1a;
            this.overdueListPosition.series[1].data = this.seriesData2a;
            this.overdueListPosition.series[2].data = this.seriesData3a;
          }
        },
        getOtPersonData() {
          this.seriesData1a = [
            this.overTime[0][0].PTYQDJKDWZHNCS,
            this.overTime[0][0].PTYQDJKDWZCSJCS,
            this.overTime[0][0].PTYQDJKDWZXNCS,
            this.overTime[0][0].PTYQDJKDWZHBHCS
          ];
          this.seriesData2a = [
            this.overTime[0][0].PTYQDJKDWZHNFS,
            this.overTime[0][0].PTYQDJKDWZCSJFS,
            this.overTime[0][0].PTYQDJKDWZXNFS,
            this.overTime[0][0].PTYQDJKDWZHBHFS
          ];
          this.seriesData3a = [
            this.overTime[0][0].PTYQDJKDWZHNZF,
            this.overTime[0][0].PTYQDJKDWZCSJZF,
            this.overTime[0][0].PTYQDJKDWZXNZF,
            this.overTime[0][0].PTYQDJKDWZHBHZF
          ];
        },
        getPtPersonData() {
          this.seriesData11 = [
            this.overTime[0][0].PTYQDJHNXYFK,
            this.overTime[0][0].PTYQDJCSJXYFK,
            this.overTime[0][0].PTYQDJXNXYFK,
            this.overTime[0][0].PTYQDJHBHXYFK
          ];
          this.seriesData21 = [
            this.overTime[0][0].PTYQDJHNLJK,
            this.overTime[0][0].PTYQDJCSJLJK,
            this.overTime[0][0].PTYQDJXNLJK,
            this.overTime[0][0].PTYQDJHBHLJK
          ];
          this.seriesData31 = [
            this.overTime[0][0].PTYQDJHNXSH,
            this.overTime[0][0].PTYQDJCSJXSH,
            this.overTime[0][0].PTYQDJXNXSH,
            this.overTime[0][0].PTYQDJHBHXSH
          ];
        },
        getPersonData() {
          if (this.overTime[0] && this.overTime[0][0]) {
            this.seriesData1 = [
              this.overTime[0][0].YQDJKDWZXSHJBR,
              this.overTime[0][0].YQDJKDWZXYFKJBR,
              this.overTime[0][0].YQDJKDWZLJKJBR
            ];
            this.seriesData2 = [
              this.overTime[0][0].YQDJKDWZXSHSM,
              this.overTime[0][0].YQDJKDWZXYFKSM,
              this.overTime[0][0].YQDJKDWZLJKSM
            ];
            this.seriesData3 = [
              this.overTime[0][0].YQDJKDWZXSHCS,
              this.overTime[0][0].YQDJKDWZXYFKCS,
              this.overTime[0][0].YQDJKDWZLJKCS
            ];
            this.seriesData4 = [
              this.overTime[0][0].YQDJKDWZXSHFS,
              this.overTime[0][0].YQDJKDWZXYFKFS
            ];
            this.seriesData5 = [
              this.overTime[0][0].YQDJKDWZXSHZF,
              this.overTime[0][0].YQDJKDWZXYFKZF
            ];
          }
        },
        //逾期责任人分布。
        getOverTimePerson() {
          let sePersonList = [
            { name: "经办人", KDRNAME: this.overTime[0] && this.overTime[0][0] ? this.overTime[0][0].YQDJKDRJBR : '' }
          ]; //经办人
          let sePersonList1 = [
            { name: "扫描", KDRNAME: this.overTime[0] && this.overTime[0][0] ? this.overTime[0][0].YQDJKDRSM : '' }
          ]; //扫描
          let sePersonList21 = [];
          let sePersonList2name = [];
          let sePersonList31 = [];
          let sePersonList3name = [];
          let sePersonList41 = [];
          let sePersonList4name = [];
          this.overTime[3] ? this.overTime[3].forEach(item => {
            this.$set(item, "name", "支付");
            sePersonList41.push(item.KDRSL);
            sePersonList4name.push(item.KDRNAME);
          }) : '';
          console.log(sePersonList41, 'sePersonList41')
          this.overTime[2] ? this.overTime[2].forEach(item => {
            this.$set(item, "name", "复审");
            sePersonList2name.push(item.FSNAME);
            sePersonList31.push(item.FSSL);
          }) : '';
          this.overTime[1] ? this.overTime[1].forEach(item => {
            this.$set(item, "name", "初审");
            sePersonList21.push(item.CSSL);
            sePersonList3name.push(item.CSNAME);
          }) : "";
          let sePersonList4 = this.overTime[3]; // 支付
          let sePersonList3 = this.overTime[2]; // 支付
          let sePersonList2 = this.overTime[1]; // 支付
          let data = sePersonList.concat(
            sePersonList1,
            sePersonList2,
            sePersonList3,
            sePersonList4
          ); //全部数据集合
          let data1 = [
            this.overTime[0][0].YQDJKDRJBR,
            this.overTime[0][0].YQDJKDRSM
          ].concat(sePersonList21, sePersonList31, sePersonList41); // x轴需要的数据
          let data2 = ["经办人", "扫描"].concat(
            sePersonList2name,
            sePersonList3name,
            sePersonList4name
          ); //x轴名称。
          this.overdueListPerson = {
            title: {
              left: "center"
            },
            grid: {
              // left: '25%',
              // right: '0%',
              // bottom: '2%',
              containLabel: true
            },
            xAxis: {
              // EmployeeOrPlatform。员工还是平台data 不一样。
              axisLabel: this.globalVariable.axisLabel,
              axisLine: this.globalVariable.axisLine,
              show: true,
              data: data2 // TODO x轴需要展示的数据
            },
            yAxis: [
              {
                type: "value",
                scale: true,
                name: "",
                max: 99, // TODO 最大值数据
                min: 0, // TODO 最小值数据
                splitNumber: null,
                axisLabel: this.globalVariable.axisLabel,
                axisLine: this.globalVariable.axisLine,
                splitLine: this.globalVariable.splitLine
              }
              // {
              //   type: "value",
              //   scale: true,
              //   name: "",
              //   max: 100, // TODO 最大值数据
              //   min: 80, // TODO 最小值数据
              //   splitNumber: 11, // 控制显示多少行线标
              //   axisLabel: this.globalVariable.yxisLabel,
              //   axisLine: this.globalVariable.axisLine,
              //   splitLine: this.globalVariable.splitLine
              // }
            ],
            dataZoom: this.globalVariable.dataZoom,
            series: [
              {
                name: "经办人", // todo xAxis.data值
                type: "bar",
                barGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
                barCategoryGap: "50%",
                barMinHeight: this.globalVariable.barMinHeight,
                label: {
                  show: true,
                  fontSize: this.globalVariable.itemFontSize,
                  color: this.globalVariable.labelColor
                },
                itemStyle: {
                  normal: {
                    color: function (params) {
                      // var colorList = _this.globalVariable.itemColorList;
                      var colorList = [
                        "rgba(87,202,251)",
                        "rgba(144,124,252)",
                        "rgba(118,230,115)",
                        "rgba(68, 181, 156)",
                        "rgba(0,221,223)"
                      ];
                      // this.data1 后台的返回值。带有名称和index。和取得放在echart的data对比;如果相同返回颜色值。
                      if (data[params.dataIndex].name == "经办人") {
                        return colorList[0];
                      } else if (data[params.dataIndex].name == "扫描") {
                        return colorList[1];
                      } else if (data[params.dataIndex].name == "初审") {
                        return colorList[2];
                      } else if (data[params.dataIndex].name == "复审") {
                        return colorList[3];
                      } else if (data[params.dataIndex].name == "支付") {
                        return colorList[4];
                      }
                    }
                  }
                },
                data: data1
                // todo xAxis.data[0]值
              }
            ]
          }
        },
        // 加载各个 echart图表，图表闪动时数据加载得问题，样式放在固定的option中。
        updateData() {
          // this.getSweep() // 扫单
          // this.getlist4(); // 审核
          // this.getPay(); // 支付
          // this.getoverTime(); // 逾期单据
          // this.getoverTimePostion(); // 逾期单据 卡点位置分布
          // this.getOverTimePerson(); // 期单据 卡点责任人分
          // 扫单
          let myChart = this.$echarts.init(document.getElementById("sweepOrder1"));
          myChart.setOption(this.option, false);
          // 审核
          let myChart1 = this.$echarts.init(document.getElementById("sweepOrder2"));
          myChart1.setOption(this.optionOne, false);
          // 支付
          let myChart2 = this.$echarts.init(document.getElementById("sweepOrder3"));
          myChart2.setOption(this.optionTwo, false);
          //审核图表
          let myChart4 = this.$echarts.init(document.getElementById("toExamine"));
          myChart4.setOption(this.examineoption, false);
          // 支付日清日结率-分类型
          let pay0 = this.$echarts.init(document.getElementById("pay_0"));
          pay0.setOption(this.payTypeOption, false);
          // 支付日清日结率-分平台
          let pay1 = this.$echarts.init(document.getElementById("pay_1"));
          pay1.setOption(this.payAreaOption, false);
          // 转账支付日清日结率-分平台
          let pay2 = this.$echarts.init(document.getElementById("pay_2"));
          pay2.setOption(this.payZzOption, false);
          // 保理兑付日清日结率-分平台
          let pay3 = this.$echarts.init(document.getElementById("pay_3"));
          pay3.setOption(this.payBlOption, false);
          // 商票出票日清日结率-分平台
          let pay4 = this.$echarts.init(document.getElementById("pay_4"));
          pay4.setOption(this.payCpOption, false);
          // 商票兑付日清日结率-分平台
          let pay5 = this.$echarts.init(document.getElementById("pay_5"));
          pay5.setOption(this.payDfOption, false);
          // 累给逾期 // 逾期单据
          var myChart6 = this.$echarts.init(document.getElementById("overTimeBox"));
          myChart6.clear()
          myChart6.setOption(this.overdueListType, false);
          // 累给逾期逾期单据 卡点位置分布
          let myChart7 = this.$echarts.init(
            document.getElementById("overTimePostionBox")
          );
          myChart7.clear()
          myChart7.setOption(this.overdueListPosition, false);
          // 逾期累计责任人分布。
          let myChart8 = this.$echarts.init(
            document.getElementById("overTimePersonBox")
          );
          myChart8.setOption(this.overdueListPerson, false);
          window.onresize = function () {
            myChart.resize(); // 图表根据窗口大小进行自适应
            myChart1.resize(); // 图表根据窗口大小进行自适应
            myChart2.resize(); // 图表根据窗口大小进行自适应
            myChart4.resize(); // 图表根据窗口大小进行自适应
            pay0.resize(); // 图表根据窗口大小进行自适应
            pay1.resize(); // 图表根据窗口大小进行自适应
            pay2.resize(); // 图表根据窗口大小进行自适应
            pay3.resize(); // 图表根据窗口大小进行自适应
            pay4.resize(); // 图表根据窗口大小进行自适应
            pay5.resize(); // 图表根据窗口大小进行自适应
            myChart6.resize(); // 图表根据窗口大小进行自适应
            myChart7.resize(); // 图表根据窗口大小进行自适应
            myChart8.resize(); // 图表根据窗口大小进行自适应
          };
        }
      },
      mounted() {
        this.updateData();
      }
    };
  </script>
  
  <style>
    #sweepOrder1,
    #sweepOrder2,
    #sweepOrder3 {
      width: 60%;
      height: 100%;
    }
  
    .stationCur {
      color: blue;
    }
  
    #toExamine {
      width: 100%;
      min-height: 4.2rem;
      margin-bottom: 0.4rem;
    }
  
    .pay {
      width: 100%;
      display: flex;
      flex-flow: column;
    }
  
    #pay_0,
    #pay_1,
    #pay_2,
    #pay_3,
    #pay_4,
    #pay_5 {
      width: 50%;
      height: 5rem;
      margin-bottom: 0.4rem;
    }
  
    #overTimeBox,
    #overTimePostionBox {
      width: 100%;
      height: 6rem;
      margin-bottom: 0.4rem;
    }
  
    #list10 {
      width: 100%;
      height: 6rem;
    }
  
    .echartsWidth {
      width: 33.3%;
      height: 3.5rem;
      display: flex;
      align-items: center;
    }
  
    .circlFontSize {
      font-size: 0.15rem;
    }
  
    .circlFontSize span {
      display: block;
      margin-bottom: 0.1rem;
    }
  
    .dailyReport {
      display: flex;
      flex-flow: column;
      height: auto;
      padding: 0.4rem 0.2rem;
      overflow: scroll;
  
      >div {
        margin-bottom: 1rem;
      }
    }
  
    .personLiable p {
      align-self: center;
      color: #999;
      margin-bottom: 0.2rem;
    }
  
    .personLiable div {
      justify-content: center;
    }
  
    .personLiable div span {
      width: 0.2rem;
      height: 0.2rem;
      margin: 0 0.1rem;
    }
  </style>